@charset 'utf-8';
@import  'sandal/core';
@import  'core/mixins', 'core/functions', 'core/vars';

.product-content{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	// background-color: blue;

	.ht-product-banner{
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		width: 100%;
		height: 485px;
		margin: 0 auto;
		background: url('../img/top-banner/product.jpg') no-repeat top center; 
	}

	.product-a{
		position: relative;
		top: 485px;
		width: 100%;
		height: 350px;
		background-color: #fff;
	}

	.product-a .product-a-wrap,
	.product-b .product-b-wrap{
		width: 1000px;
		height: 100%;
		margin: 0 auto;
		overflow: hidden;
	}

	.product-a .product-a-wrap div{
		width: 375px;
		height: 100%;
	}
	.product-a .product-a-wrap ul{
		width: 625px;
		height: 100%;
	}
	.product-a .product-a-wrap div{
		float:left;
		color: #333;
		padding: 100px 50px 0 0;
	}
	.product-a .product-a-wrap div h2{
		font-size: 22px;
		height: 60px;
		margin: 0;
	}
	.product-a .product-a-wrap div p{
		font-size: 14px;
		line-height: 26px;
		text-indent: 2em;
	}

	.product-a .product-a-wrap ul{
		float:right;
	}
	.product-a .product-a-wrap ul li{
		position: relative;
		width: 20%;
		height: 100%;
		float: left;
		color: #fff;
	}
	.product-a .product-a-wrap ul li h2{
		font-size: 26px;
		width: 60px;
		margin: 145px auto 0;
	}
	// .product-a .product-a-wrap ul li span{
	// 	width: 100%;
	// 	display: block;
	// 	text-align: center;
	// 	margin-top: 80px;
	// }

	.product-a .product-a-wrap ul li:nth-child(1){background-color: #1a71c2;}
	.product-a .product-a-wrap ul li:nth-child(2){background-color: #4e92d1;}
	.product-a .product-a-wrap ul li:nth-child(3){background-color: #4d9fc1;}
	.product-a .product-a-wrap ul li:nth-child(4){background-color: #4c6db9;}
	.product-a .product-a-wrap ul li:nth-child(5){background-color: #6272ad;}
	.product-a .product-a-wrap ul li:nth-child(1):hover{background-color: #5da6d1;cursor:pointer;}
	.product-a .product-a-wrap ul li:nth-child(2):hover{background-color: #5ea2d1;cursor:pointer;}
	.product-a .product-a-wrap ul li:nth-child(3):hover{background-color: #5dafc1;cursor:pointer;}
	.product-a .product-a-wrap ul li:nth-child(4):hover{background-color: #5c7db9;cursor:pointer;}
	.product-a .product-a-wrap ul li:nth-child(5):hover{background-color: #7282ad;cursor:pointer;}
	.product-a .product-a-wrap ul li i{
		position: absolute;
		top: 80px;
		left: 50%;
		transform: translateX(-50%);
		content: '';
		display: block;
		width: 40px;
		height: 40px;
	}
	.product-a .product-a-wrap .i1{background: url('../img/product/icon-0.png') no-repeat center center;}
	.product-a .product-a-wrap .i2{background: url('../img/product/icon-1.png') no-repeat center center;}
	.product-a .product-a-wrap .i3{background: url('../img/product/icon-2.png') no-repeat center center;}
	.product-a .product-a-wrap .i4{background: url('../img/product/icon-3.png') no-repeat center center;}
	.product-a .product-a-wrap .i5{background: url('../img/product/icon-4.png') no-repeat center center;}

	.product-b{
		position: relative;
		top: 485px;
		width: 100%;
		height: 350px;
		background-color: #cce8f2;
	}
	.product-b .product-b-wrap{
		overflow: hidden;
		zoom: 1;
	}
	.product-b .product-b-wrap div{
		width: 50%;
		height: 100%;
		float: left;
		color: #333;
	}
	.product-b .product-b-wrap div:first-child{
		padding: 60px 20px 0 0;
	}
	.product-b .product-b-wrap div h2{
		font-size: 22px;
		height: 60px;
		margin: 0;
	}
	.product-b .product-b-wrap div:first-child p{
		font-size: 14px;
		line-height: 26px;
		text-indent: 2em;
	}

	.product-b .product-b-wrap div.product-b-r{position: relative;box-sizing: border-box;}
	.product-b .product-b-wrap div.product-b-r img{
		position: absolute;
		top: 50%;
		left: 50%;
		transition: transform 0.5s ease;
		transform: translate(-50%,-50%);
	}
	.product-b .product-b-wrap div.product-b-r img:hover{
		transform: translate(-50%,-52%);
		cursor: pointer;
	}

	.product-c{
		position: relative;
		top: 485px;
		margin-bottom:485px;
		width: 100%;
		height: 350px; 
		overflow:hidden;
		background-image: url('../img/product/product-bg-img.jpg');
		background-size: cover;
		background-attachment: fixed;
	}
	.product-c .product-c-warp{
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 1200px;
		height: 350px;
		padding:100px 200px 0;
		color: #fff;
		background: url('../img/product/ABS.png') center no-repeat;
	}

	.product-c .product-c-warp h2{
		font-size: 22px;
		height: 50px;
	}
	.product-c .product-c-warp p{
		font-size: 14px;
		line-height: 30px;
	}

	.product-c .product-c-warp:after{
		position: absolute;
		top: 120px;
		left: 100px;
		content: '';
		display: block;
		width: 75px;
		height: 150px;
		border-right: 1px solid #fff;
		background: url('../img/product/icon-5.png') no-repeat left center;
	}
}

